<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--  获取样式
			 语法：元素.style.css样式名
			 如果要操作的样式名是两个单词组合成的，那么要去掉"-"，再把第2个单词首字母改成大写
			 设置样式
			 1.设置单个样式:  元素.style.css样式名=值;
			 2.设置多个样式：元素.style.cssText="样式1:值1;样式2:值2...样式n:值n";
		-->
    <div
      class="box"
      style="background-color: red; color: white; font-size: 28px"
    >
      JavaScript操作style属性
    </div>
    <input type="button" id="btn1" value="获取div的样式" />
    <input type="button" id="btn2" value="设置div的样式" />
    <input type="button" id="btn3" value="设置div的多个样式" />
    <script>
      //获取按钮
      var btn1 = document.getElementById("btn1");
      //获取要操作的div
      var div = document.querySelector(".box");
      //添加单击事件
      btn1.onclick = function () {
        //获取div的color样式
        var color = div.style.color;
        console.log("颜色：" + color);
        //获取div的background-color
        var bgColor = div.style.backgroundColor;
        console.log("背景色：" + bgColor);
        var size = div.style.fontSize;
        console.log("字体大小：" + size);
      };
      //获取按钮
      var btn2 = document.getElementById("btn2");
      //添加单击事件
      btn2.onclick = function () {
        //  设置div的字体大小为24像素
        div.fontSize = "24px";
        //设置div的color为orangered
        div.style.color = "orangered";
        //设置div的背景色为rgb(248, 241, 232)
        div.style.backgroundColor = "rgb(248, 241, 232)";
      };
      //获取按钮
      var btn3 = document.getElementById("btn3");
      btn3.onclick = function () {
        //给div设置字体大小，color,背景色3个样式
        div.style.cssText =
          "font-size: 20px;color:orange;background-color:rgb(170, 240, 240);";
      };
    </script>
  </body>
</html>
